<script setup>
  import { ref, onMounted, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import taskApi from '@/apis/task.js'

  const taskId = ref(0)
  const planTime = ref('')
  const delayTime = ref('')
  const desc = ref('')
  //获取id和时间
  onLoad((params) => {
    taskId.value = params.id
    planTime.value = params.planTime
  })
  //点击选择时间
  function onchengTime(event) {
    const [date] = planTime.value.split(' ')
    delayTime.value = date + ' ' + event.detail.value
  }
  // 获取字数
  const descLength = computed(() => {
    return desc.value.length
  })
  // 是否可提交
  const isSubmit = computed(() => {
    // 计算属性会返回一个响应式数据，所有要在一个计算属性中，使用另一个计算属性需要.value
    return desc.value.length > 0 && desc.value.length <= 50 && !isTiemOut.value
  })
  //拆分时间
  const oldTime = computed(() => {
    // 2025-2-24  16:04
    let [date, time] = planTime.value.split(' ')
    // 16:04:23
    let [hour, min] = time.split(':')
    return `${hour}:${min}`
  })
  //计算时间是否超过2个小时
  const isTiemOut = computed(() => {
    // 现在时间减原来时间>7200 * 1000
    let oldTime = new Date(planTime.value)
    let newTime = new Date(delayTime.value)
    // 获得两个时间差的毫秒数
    let mins = newTime - oldTime
    return mins > 7200 * 1000 ? true : false
  })
  // 确认提交
  async function onsubmit() {
    const fromData = {
      id: taskId.value,
      delayTime: delayTime.value,
      delayReason: desc.value,
    }
    try {
      let { code, msg } = await taskApi.delay(fromData)
      if (code !== 200) {
        return uni.utils.toast(msg)
      }
      uni.switchTab({
        url: '/pages/task/index',
      })
    } catch (err) {
      uni.utils.toast('网络请求异常, 稍后重试 !')
    }
  }
</script>

<template>
  <view class="page-container">
    <uni-list :border="false">
      <uni-list-item title="原定时间 " showArrow :right-text="planTime" />
      <uni-list-item title="延迟时间" showArrow>
        <template v-slot:footer>
          <picker
            :value="oldTime"
            class="time-picker"
            mode="time"
            @change="onchengTime"
          >
            <text :class="{ error: isTiemOut }">{{
              delayTime || '不可超过2个小时'
            }}</text>
          </picker>
        </template>
      </uni-list-item>
      <uni-list-item direction="column">
        <template v-slot:body>
          <view class="textarea-wrapper">
            <textarea
              class="textarea"
              v-model="desc"
              placeholder-style="color: #818181"
              placeholder="请输入延迟提货原因"
            ></textarea>
            <text :class="{ error: descLength > 50 }" class="words-count"
              >{{ descLength }}/50</text
            >
          </view>
        </template>
      </uni-list-item>
      <uni-list-item :border="false">
        <template v-slot:body>
          <button class="button" :disabled="!isSubmit" @click="onsubmit">
            提交
          </button>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
